<template>
  <div class="right-resource-list-wrapper">
    <div class="label">推荐资源</div>

    <el-tabs v-model="activeName">
      <!-- <el-tab-pane label="土地" name="Land">土地</el-tab-pane>
      <el-tab-pane label="写字楼" name="Building">写字楼</el-tab-pane>
      <el-tab-pane label="厂房" name="Workshop">厂房</el-tab-pane> -->

      <el-tab-pane label="土地" name="Land">
        <div v-if="landList.length > 0">
          <LaneRightListItem v-for="item in landList" :key="item.id" :data-obj="item" />
        </div>
        <a-empty v-else :image="simpleImage" />
      </el-tab-pane>
      <el-tab-pane label="写字楼" name="Building">
        <div v-if="buildingList.length > 0">
          <BuildingRightListItem v-for="item in buildingList" :key="item.id" :data-obj="item" />
        </div>
        <a-empty v-else :image="simpleImage" />
      </el-tab-pane>
      <el-tab-pane label="厂房" name="Workshop">
        <div v-if="workshopList.length > 0">
          <WorkshopRightListItem v-for="item in workshopList" :key="item.id" :data-obj="item" />
        </div>
        <a-empty v-else :image="simpleImage" />
      </el-tab-pane>
    </el-tabs>

    <div class="more-btn pb-[20px]">
      <el-button class="w-full" plain size="mini" @click="handleMore">查看更多</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Empty } from 'ant-design-vue'
import LaneRightListItem from '~/components/portal/resource/land/LaneRightListItem.vue'
import BuildingRightListItem from '@/components/portal/resource/building/BuildingRightListItem.vue'
import WorkshopRightListItem from '@/components/portal/resource/workshop/WorkshopRightListItem.vue'
import { getLandPageList, getBuildingPageList, getWorkshopPageList } from '@/api/park'
export default Vue.extend({
  components: { LaneRightListItem, BuildingRightListItem, WorkshopRightListItem },
  data() {
    return {
      activeName: 'Land',
      landList: [],
      buildingList: [],
      workshopList: [],
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    }
  },
  head: {
    title: '',
  },
  async mounted() {
    const { id } = this.$route.params
    if (!id) return
    const params = {
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
      },
      sort: { 'data.sort': -1 },
    }
    const res = await Promise.all([
      getLandPageList(params),
      getBuildingPageList(params),
      getWorkshopPageList(params),
    ])
    const [landList, buildingList, workshopList] = res
    this.landList = landList.list
    this.buildingList = [] // buildingList.list
    this.workshopList = workshopList.list
    console.log(
      '%c [ res ]-53',
      'font-size:13px; background:pink; color:#bf2c9f;',
      res,
      buildingList
    )
  },
  methods: {
    handleMore() {
      this.$router.push('/resource')
    },
  },
})
</script>
<style lang="scss" scoped>
.right-resource-list-wrapper {
  padding: 0 20px;
  background-color: #fff;

  .label {
    color: #40445d;
    font-size: 20px;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #e0e4ed;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
  }
}
</style>
